<template>
	<div class="conditionWarp">
		<div class="condition-show">
			<!-- <span>区域：</span> -->
			<span class="condition-show-result">{{getFilterName()}}</span>
			<i class="ivu-icon ivu-icon-arrow-down-b ivu-select-arrow"></i>
		</div>
		<div class="condition-down">
			<div class="condition-down-items" @click.stop="warpClick">
				<div class="condition-down-title">楼盘标签</div>
				<div class="condition-down-overDiv productUl" >
					<ul>
						<li v-for="(item,index) in companyList" :key="index" v-if="index<numObj.companyNum">
							<input type="checkbox" v-model="companyIds" class="condition-down-checkbox" :value="item.id" :id="'company'+item.id">
							<label :for="'company'+item.id" @click.stop="handleChooseCompany()" :title="item.tagName">{{item.tagName}}</label>
						</li>
						<li v-if="companyList.length>13">
							<div class="open" @click="handleOpen(companyList,numObj.companyNum,'companyNum')">
								<span v-if="numObj.companyNum==12">展开</span>
								<span v-if="numObj.companyNum>12">收起</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	
	import Helper from '@/common/helper'
	import { apiPost } from '@/common/http'
	import Api from '@/api/apiNew'

	export default {
		name: 'editPanel',
		data() {
			return {
				regionId: '',
				companyId: '',
				companyIds: [-1],
				branchId: '',
				regionList: [],
				companyList: [],
				branchList: [],
				numObj: {
					regionNum: 12,
					companyNum: 12,
					branchNum: 12,
				}
			}
		},
		props: {
			multiple: {
				type: Boolean,
				default: false
			},
			agent: {
				type: Boolean,
				default: false
			},
		
		},
		methods: {
			init(query,citycodes) {
				this.resetInit();
				if (query) {
                    this.getCompanyList(query, () => {
                    });
// 					if (query.length > 0) {
// 						this.getCompanyList(query, () => {
// 						});
// 					}else {
//                         this.getCompanyList(query, () => {
//                         });
//                     }
				} else {
					this.getCompanyList('','',citycodes)
				}
			},
			resetInit() {
				this.companyIds = [-1];
				this.regionId = "-1";
				this.companyId = "-1";
				this.branchId = "-1";
				this.regionList = [];
				this.companyList = [];
				this.branchList = [];
			},
			// 获取文章标签列表
			getCompanyList(orgId, callback,citycodes) {
				var that = this;
				 var restApi = Api.caseManage.basiciInfo.tages;
				// var restApi = Api.caseManage.bigV.articleLabel;
				// var parms = { orgId: orgId }
                
                apiPost(restApi, {cityCode: citycodes}).then((res) => {
                    that.companyList = res.result;
                    if (callback) callback();
                    if (orgId && orgId.length > 0) {
                    	// that.companyList = orgId;
                    	that.companyIds = []
                    	for (var i = 0; i < orgId.length; i++) {
                    		that.companyIds.push(orgId[i].id)
                    	}
                    	that.emitHandleChooseBranch();
                    	that.getFilterName();
                    }
                },(err)=>{
                    that.companyList = [];
                });
				// Rest.get(restApi,{tagType:1}).done((res) => {
				// 	if (Helper.isSuccess(res)) {
				// 		if (res.data) {
    //                         that.companyList = res.data;
				// 			if (callback) callback();
				// 			if (orgId && orgId.length > 0) {
				// 				// that.companyList = orgId;
				// 				that.companyIds = []
				// 				for (var i = 0; i < orgId.length; i++) {
				// 					that.companyIds.push(orgId[i].id)
				// 				}
				// 				that.emitHandleChooseBranch();
				// 				that.getFilterName();
				// 			}
				// 		} else {
				// 			that.companyList = [];
				// 		}
				// 	} else {
				// 		that.companyList = [];
				// 		that.$Message.error(res.status.msg);
				// 	}
				// });
			},
			// 更多和收起
			handleOpen(list, num, key) {
				if (num == 12) {
					this.numObj[key] = list.length;
				} else {
					this.numObj[key] = 12;
				}
			},
			handleChooseCompany() { //点击选中文章标签
				this.branchId = "-1";
				this.branchList = [];
				setTimeout(() => {
					if (this.multiple) {
						if (this.companyIds.indexOf(-1) > -1) {
							this.companyIds.splice(this.companyIds.indexOf(-1), 1);
						}
					} else {}
					this.emitHandleChooseBranch();
				}, 30);
			},
			emitHandleChooseBranch() {
				var parms = {
					"regionId": this.regionId,
					"companyId": this.multiple ? this.companyIds : this.companyId,
					"branchId": this.branchId,
				}
				if (this.multiple) {
					if (parms.companyId.indexOf(-1) > -1) {
						parms.companyId = []
					}
				}
				this.$emit('handleChooseOrgan', parms);
			},
			getFilterName() {
				var haveName = false;
				var result = '';
				if (this.regionList && this.regionList.length > 0 && this.regionId != '-1') {
					result = Helper.getName(this.regionList, 'id', this.regionId, 'tagName');
					haveName = true;
				}
				if (this.multiple) {
					if (this.companyList && this.companyList.length > 0 && this.companyIds.indexOf(-1) < 0) {
						if (this.companyIds.length > 0) {
							for (var i = 0; i < this.companyIds.length; i++) {
								if (result == '') {
									result = Helper.getName(this.companyList, 'id', this.companyIds[0], 'tagName');
								} else {
									result = result + ',' + Helper.getName(this.companyList, 'id', this.companyIds[i], 'tagName');
								}
							}

							// result = result+','+this.companyIds[this.companyIds.length];
						}
						haveName = true;
					}
				}
				if (!haveName) {
					result = '请选择楼盘标签'
				}
				return result;
			},
			warpClick() {
			
			}
		},
		created() {
			// this.init();
		},
		activated() {
			// this.init();
		},
	}
</script>

<style lang="scss" scoped>
	@import "../../assets/sass/install";

	.conditionWarp {
		display: inline-block;
		width: 100%;
		height: 33px;
		color: #657180;
		position: relative;
		line-height: normal;

		.condition-show {
			display: block;
			height: 32px;
			line-height: 29px;
			padding-left: 8px;
			padding-right: 15px;
			box-sizing: border-box;
			outline: none;
			user-select: none;
			cursor: pointer;
			position: relative;
			background-color: #fff;
			border-radius: 3px;
			border: 1px solid #d7dde4;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			.condition-show-result {}
		}

		.condition-down {
			display: none;
			position: absolute;
			top: 33px;
			left: 0;
			@include transition(500ms);
			@include radius(3px);
			max-height: 480px;
			width: 700px;
			overflow: auto;
			overflow-x: hidden;
			/*margin: 5px 0;*/
			padding: 15px;
			padding-top: 5px;
			background-color: #fff;
			box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
			z-index: 900;
			text-align: left;

			.condition-down-items {
				.condition-down-title {
					font-size: 16px;
					color: #8c8c8c;
					margin-left: 4px;
					margin-bottom: 5px;
					margin-top: 10px;
				}

				.condition-down-overDiv {
					position: relative;

					.open {
						cursor: pointer;
						color: #02b0f0;
						font-size: 14px;
					}
				}

				ul {
					font-size: 0;
					width: 625px;
					overflow: hidden;

					li {
						font-size: 14px;
						margin-right: 6px;
						margin-bottom: 6px;
						display: inline-block;
						vertical-align: top;
						background-color: #f5f5f5;
						color: #2b3545;
						height: 32px;
						line-height: 32px;
						width: 80px;
						text-align: center;
						@include radius(3px);
						overflow: hidden;
						position: relative;

						label {
							display: block;
							padding: 0 10px;
							cursor: pointer;
							@include transition(500ms);
							max-width: 150px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.lable {
							&:hover {
								color: #02b0f0;
							}
						}

						.curlable {
							color: #fff;
							background-color: #02b0f0;
						}

						.condition-down-checkbox {
							position: absolute;
							top: 0;
							left: 0;
							opacity: 0;
							visibility: hidden;

							&:checked+label {
								color: #fff;
								background-color: #02b0f0;

								&:hover {
									color: #fff;
								}
							}

							&:hover+label {
								color: #02b0f0;
							}
						}

						.cur {
							color: #02b0f0;
						}
					}
				}
			}
		}

		&:hover {
			.condition-down {
				display: inline-block;
			}

			.ivu-select-arrow {
				@include rotate(180deg)
			}

			.condition-show {
				border-color: #35c0f3;
				outline: 0;
				box-shadow: 0 0 0 2px rgba(2, 176, 240, .2);
			}
		}

		;
	}
	
</style>
